<template>
	<view class="all">
		<view class="status_bar"></view>
		<myTopBar title="计量监管" url='../../static/index/img_dr.png'></myTopBar>

		<view class="center">
			<view class="center-left">
				<view @click="toPage(index)" :class="selectIndex===index?'center_left_item_current':'center_left_item'"
					v-for="item,index in leftTitle" :key='index'>{{item.name}}</view>
			</view>

			<view class="center-right-">
				<view class="" v-if="selectIndex===0">
					<!-- 饼状图 -->
					<view class="out" v-if="chartData1!={}">
						<text class="out_text">镇区垃圾饼状图：</text>
						<view class="charts-box">
							<!-- :tooltipShow="true" -->
							<qiun-data-charts type="pie" :chartData="chartData1" background="none" :tapLegend="false"
								:animation="false" />
						</view>
					</view>
					<view class="out1" v-if="chartData1!={}">
						<text class="out_text">进厂车辆占比饼状图：</text>
						<view class="charts-box">
							<qiun-data-charts type="pie" :chartData="chartData2" background="none" :tooltipShow="true"
								:tapLegend="false" :animation="false" />
						</view>
					</view>
				</view>


				<view :class="selectIndex===0?'center-right':'center-right-other'">
					<view class="center-right-inputSelect">
						<text>日期：</text>
						<input @click="visible=true,clickFlag=true" disabled type="text" v-model="data" />
						<view class="center-right-inputSelect-icon" @click="visible=false">
							<u-icon color='#58B6E5' :name='visible?"arrow-up-fill":"arrow-down-fill"'></u-icon>
						</view>
					</view>
					<!-- #58B6E5
					#4f77e5 -->
					<view :style="!changeFlag?'background-color: #58B6E5':'background-color: #414ce5'" @click="search"
						:class="selectIndex===0?'center-right-btn':'center-right-btn-other'">查询</view>
				</view>
				<picker-view @click="visible=false" v-if="visible" :value="value" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{index===0?item:item+'月'}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{index===0?item:item+'日'}}</view>
					</picker-view-column>
				</picker-view>
			</view>

			<!-- 表格 -->
			<view :class="selectIndex===0?'center-right-table':'center-right-table-four'">
				<scroll-view @scrolltolower="toAdd" scroll-y :style="scrollStyle">
					<u-table>
						<u-tr class="u-tr u-tr-title">
							<u-th v-for="(item,index) in tableTitlelist" :key='index' class="u-th"
								:width="index===1?'120rpx':''">{{item}}</u-th>
						</u-tr>
						<!-- 垃圾进厂量 -->
						<u-tr v-if='selectIndex===0'
							:style="index%2==0?'background-color: #D2DDF5;':'background-color: #EAEFFA;'"
							:class="index===0?'u-tr-content':'u-tr'" v-for="(item,index) in tableDataList">
							<u-td>{{index+1}}</u-td>
							<u-td width="120rpx">{{item.times}}</u-td>
							<u-td>{{item.township.name}}</u-td>
							<u-td>{{item.garbageType}}</u-td>
							<u-td>{{item.carNumber}}</u-td>
							<u-td>{{item.garbageWeight}}</u-td>
						</u-tr>
						<u-tr style="background-color: #D2DDF5;" v-if='selectIndex===0'>
							<u-td>合计</u-td>
							<u-td width="120rpx"></u-td>
							<u-td></u-td>
							<u-td></u-td>
							<u-td>{{carNum}}</u-td>
							<u-td>{{garbage}}</u-td>
						</u-tr>

						<!-- 炉渣-->
						<u-tr v-if='selectIndex===1'
							:style="index%2==0?'background-color: #D2DDF5;':'background-color: #EAEFFA;'"
							:class="index===0?'u-tr-content':'u-tr'" v-for="(item,index) in tableDataList">
							<u-td>{{index+1}}</u-td>
							<u-td width="120rpx">{{item.times}}</u-td>
							<u-td>{{item.carCount}}</u-td>
							<u-td>{{item.weight}}</u-td>
						</u-tr>
						<u-tr style="background-color: #D2DDF5;" v-if='selectIndex===1'>
							<u-td>合计</u-td>
							<u-td></u-td>
							<u-td>{{carNum1}}</u-td>
							<u-td>{{garbage1}}</u-td>
						</u-tr>

						<!-- 飞灰 -->
						<u-tr v-if="selectIndex===2"
							:style="index%2==0?'background-color: #D2DDF5;':'background-color: #EAEFFA;'"
							:class="index===0?'u-tr-content':'u-tr'" v-for="(item,index) in tableDataList">
							<u-td>{{index+1}}</u-td>
							<u-td width="120rpx">{{item.times}}</u-td>
							<u-td>{{item.counts}}</u-td>
							<u-td>{{item.weight}}</u-td>
							<u-td>{{item.stock}}</u-td>
							<u-td>{{item.discharge}}</u-td>
						</u-tr>
						<u-tr style="background-color: #D2DDF5;" v-if='selectIndex===2'>
							<u-td>合计</u-td>
							<u-td width="120rpx"></u-td>
							<u-td>{{outCar}}</u-td>
							<u-td>{{outWeight}}</u-td>
							<u-td>{{stock}}</u-td>
							<u-td>{{discharge}}</u-td>
						</u-tr>


						<!-- 渗滤液 -->
						<u-tr v-if="selectIndex===3"
							:style="index%2==0?'background-color: #D2DDF5;':'background-color: #EAEFFA;'"
							:class="index===0?'u-tr-content':'u-tr'" v-for="(item,index) in tableDataList">
							<u-td>{{index+1}}</u-td>
							<u-td width="120rpx">{{item.times}}</u-td>
							<u-td>{{item.counts}}</u-td>
							<u-td>{{item.weight}}</u-td>
							<u-td>{{item.stock}}</u-td>
							<u-td>{{item.discharge}}</u-td>
						</u-tr>
						<u-tr style="background-color: #D2DDF5;" v-if='selectIndex===3'>
							<u-td>合计</u-td>
							<u-td width="120rpx"></u-td>
							<u-td>{{outCar}}</u-td>
							<u-td>{{outWeight}}</u-td>
							<u-td>{{stock}}</u-td>
							<u-td>{{discharge}}</u-td>
						</u-tr>


						<!-- 地磅 -->
						<u-tr v-if="selectIndex===4"
							:style="index%2==0?'background-color: #D2DDF5;':'background-color: #EAEFFA;'"
							:class="index===0?'u-tr-content':'u-tr'" v-for="(item,index) in tableDataList">
							<u-td>{{index+1}}</u-td>
							<u-td width="120rpx">{{item.unit}}</u-td>
							<u-td>{{item.content}}</u-td>
							<u-td>{{item.qualified==='0'?'否':'是'}}</u-td>
							<u-td>{{item.effectiveDate}}</u-td>
							<u-td>
								<u-icon @click="toPdf(item.pdf)" class="pdfIcon" name='file-text-fill'></u-icon>
							</u-td>
						</u-tr>

						<u-empty icon-size='50' img-width='150' font-size="15" v-if="tableDataList.length===0"
							text="数据为空"></u-empty>
					</u-table>

				</scroll-view>
			</view>

		</view>
	</view>
</template>

<script>
	import qiunDataCharts from '../../components/qiun-data-charts/qiun-data-charts.vue'
	import myTopBar from '../topNavigationBar/topNavigationBar'
	export default {
		components: {
			qiunDataCharts,
			myTopBar
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = ['']
			const month = date.getMonth() + 1
			const days = ['']
			const day = date.getDate()
			for (let i = 2000; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}

			return {
				background: {
					backgroundColor: '#2169D3'
				},
				leftTitle: [{
					name: "垃圾进厂量",
					url: "/pages/measurementManage1/measurementManage1"
				}, {
					name: "炉渣",
				}, {
					name: "飞灰",
				}, {
					name: "渗滤液",
				}, {
					name: "地磅检定记录",
				}, ],
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, 0],
				visible: false,
				clickFlag: false,
				selectIndex: 0,
				/* 饼状图数据 */
				chartData1: {},
				chartData2: {},
				pageNo: 1,
				tableDataList: [],
				status: 'loadmore',
				count: 0,
				/* 控制查询按钮是否可以点击 */
				btnClickFlag: true,
				/* 垃圾 合计车数 */
				carNum: "",
				/* 合计垃圾量 */
				garbage: "",
				/* 炉渣 合计*/
				carNum1: "",
				/* 重量合计 */
				garbage1: "",
				/* 飞灰合计 */
				/* 外运车数 */
				outCar: "",
				/* 外运重量 */
				outWeight: "",
				/* 暂存量 */
				stock: "",
				/* 产生量 */
				discharge: "",

				/* 渗滤液合计 */
				/* 外运车数 */
				outCar1: "",
				/* 外运重量 */
				outWeight1: "",
				/* 暂存量 */
				stock1: "",
				/* 产生量 */
				discharge1: "",
				changeFlag: false
			}
		},
		onLoad() {
			this.selectGarbage(this.year, this.month)
			this.selectCount(this.year, this.month)
		},
		computed: {
			scrollStyle() {
				return {
					height: this.selectIndex == 0 ? '120rpx' : '160rpx'
				}
			},
			data() {

				if (this.clickFlag) {
					this.btnClickFlag = false
					if (this.month === '') {
						this.day = ''
						return this.year + '年' + this.month
					} else {
						if (this.day === '') {
							return this.year + '年' + this.month + '月' + this.day
						} else {
							return this.year + '年' + this.month + '月' + this.day + '日'
						}
					}


				} else {
					this.btnClickFlag = true
					return ''
				}
			},
			tableTitlelist() {
				if (this.selectIndex === 0) {
					return ['序号', '日期', '镇区', '垃圾类别', '车数', '垃圾量(吨)']
				} else if (this.selectIndex === 1) {
					return ['序号', '日期', '车数', '重量(吨)']
				} else if (this.selectIndex === 2 || this.selectIndex === 3) {
					return ['序号', '日期', '外运车数', '外运重量(吨)', '暂存量(吨)', '产生量(吨)']
				} else if (this.selectIndex === 4) {
					return ['序号', '检查单位', '检定内容', '是否合格', '有效日期', 'pdf文件']
				}
			},
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				this.btnClickFlag = true
			},
			toPage(index) {
				/* 清空 表格内容 */
				this.tableDataList = []
				this.pageNo = 1
				this.selectIndex = index
				console.log(this.selectIndex);
				if (this.selectIndex === 4) {
					this.value = [9999, 0, 0]
					// this.selectLoadometer(this.year)
					return;
				}
				this.selectGarbage(this.year, this.month)


			},
			async selectGarbage(y, m) {
				if (y != undefined) {
					this.year = y
					this.month = m
					this.day = ''
					console.log(y);
					console.log(m);
				}
				this.btnClickFlag = true
				if (this.day === '') {
					if (this.month < 10) {
						var params = {
							pageSize: 6,
							pageNo: this.pageNo,
							type: 2,
							month: this.year + '-0' + this.month
						}
						console.log(params);
					} else {
						var params = {
							pageSize: 6,
							pageNo: this.pageNo,
							type: 2,
							month: this.year + '-' + this.month
						}
					}

				} else if (this.day < 10) {
					if (this.month < 10) {
						var params = {
							type: 1,
							day: this.year + "-0" + this.month + "-0" + this.day
						}
					} else {
						var params = {
							type: 1,
							day: this.year + "-" + this.month + "-0" + this.day
						}
					}

				} else {
					if (this.month < 10) {
						var params = {
							type: 1,
							day: this.year + "-0" + this.month + "-" + this.day
						}
					} else {
						var params = {
							type: 1,
							day: this.year + "-" + this.month + "-" + this.day
						}
					}
				}
				let res;
				if (this.selectIndex === 0) {
					res = await this.$u.api.selectGarbage(params)
				} else if (this.selectIndex === 1) {
					res = await this.$u.api.selectSlag(params)
				} else if (this.selectIndex === 2) {
					res = await this.$u.api.selectFlyAsh(params)
				} else if (this.selectIndex === 3) {
					res = await this.$u.api.selectLeachate(params)
				}
				console.log(res);
				if (!res.success) {
					return;
				}
				this.carNum = res.body.sum[0].carNumberSum
				this.garbage = res.body.sum[0].garbageWeightSum

				this.carNum1 = res.body.sum[0].carCountSum
				this.garbage1 = res.body.sum[0].weightSum

				this.outCar = res.body.sum[0].countsSum
				this.outWeight = res.body.sum[0].weightSum
				this.stock = res.body.sum[0].stockSum
				this.discharge = res.body.sum[0].dischargeSum

				this.outCar1 = res.body.sum[0].countsSum
				this.outWeight1 = res.body.sum[0].weightSum
				this.stock1 = res.body.sum[0].stockSum
				this.discharge1 = res.body.sum[0].dischargeSum

				if (this.day === '') {
					console.log('1');
					this.count = res.body.data.count
					res.body.data.list.forEach(item => {
						this.tableDataList.push(item)
					})
					this.pageNo++;
					if (this.tableDataList.length >= this.count) {
						this.status = 'nomore'
						return;
					} else {
						this.status = 'loadmore'
					}
				} else {
					this.tableDataList = res.body.data
				}
			},
			search() {
				this.changeFlag = true
				setTimeout(() => {
					this.changeFlag = false
				}, 200)

				if (!this.btnClickFlag) {
					this.tableDataList = []
					this.selectGarbage()
					this.selectCount()
				}
				if (this.selectIndex === 4) {
					this.selectLoadometer()
				}
				// else {
				// 	this.$u.toast("请先选择日期！")
				// }
			},
			toAdd() {
				if (this.pageNo >= this.count || this.status === 'nomore') {
					return;
				};
				this.status = 'loading';
				setTimeout(() => {
					this.selectGarbage()
				}, 100)
			},
			/* 查询饼图数据 */
			async selectCount(y, m) {
				if (this.day != "") {
					return;
				}
				/* 1. 垃圾进厂量的数据 */
				if (y != undefined) {
					if (m < 10) {
						var params = {
							month: y + '-0' + m,
							type: 1
						}
						var params2 = {
							month: y + '-0' + m,
							type: 2
						}
					} else {
						var params = {
							month: y + '-' + m,
							type: 1
						}
						var params2 = {
							month: y + '-' + m,
							type: 2
						}
					}
				} else {
					/* 1 垃圾量  2 车辆 */
					if (this.month < 10) {
						var params = {
							month: this.year + '-0' + this.month,
							type: 1
						}
						var params2 = {
							month: this.year + '-0' + this.month,
							type: 2
						}
					} else {
						var params = {
							month: this.year + '-' + this.month,
							type: 1
						}
						var params2 = {
							month: this.year + '-' + this.month,
							type: 2
						}
					}
				}
				const res = await this.$u.api.selectCount(params)
				const res2 = await this.$u.api.selectCount(params2)
				if (!res.success) {
					this.chartData1 = {}
				}
				if (!res2.success) {
					this.chartData2 = {}
					console.log(this.chartData2);
					return
				}

				let datas = []
				let data1 = {}
				let datas2 = []
				let data2 = {}
				res.body.data.map(item => {
					data1.value = item.sum1
					data1.name = item.township.name
					datas.push({
						value: item.sum1,
						name: item.township.name
					})
				})
				res2.body.data.map(item => {
					data2.value = item.sum1
					data2.name = item.township.name
					datas2.push({
						value: item.sum1,
						name: item.township.name
					})
				})
				const ch1 = {
					series: [{
						data: []
					}]
				}
				const ch2 = {
					series: [{
						data: []
					}]
				}
				ch1.series[0].data = datas
				ch2.series[0].data = datas2
				// console.log(ch1);
				this.chartData1 = ch1
				this.chartData2 = ch2
				console.log(this.chartData1);
				console.log(this.chartData2);
			},
			/* 查询地磅 */
			async selectLoadometer() {
				console.log(this.year);
				console.log(this.month);
				console.log(this.day);
				let param;
				if (this.month != '' && this.day === '') {
					this.$u.toast('请选择年份或者日期！')
					return
				}
				if (this.month === '' || this.day === '') {
					param = {
						year: this.year,
						type: 2
					}
				} else {
					if (this.month < 10) {
						if (this.day < 10) {
							param = {
								type: 1,
								day: this.year + '-0' + this.month + '-0' + this.day
							}
						} else {
							param = {
								type: 1,
								day: this.year + '-0' + this.month + '-' + this.day
							}
						}
					} else {
						if (this.day < 10) {
							param = {
								type: 1,
								day: this.year + '-' + this.month + '-0' + this.day
							}
						} else {
							param = {
								type: 1,
								day: this.year + '-' + this.month + '-' + this.day
							}
						}
					}
				}
				console.log(param);
				const res = await this.$u.api.selectLoadometer(param)
				console.log(res);

				this.month === "" ? this.tableDataList = res.body.data.list : this.tableDataList = res.body.data
				console.log(this.tableDataList);
			},
			/* 点击跳转到pdf */
			toPdf(url) {
				console.log(this.$u.baseUrl + url);
				// uni.openDocument({
				// 	filePath:this.$u.baseUrl+url
				// })
				
				uni.navigateTo({
					url:`../test/test?url=${this.$u.baseUrl + url}`,
				})
				// return
				
				// if (uni.getSystemInfo().platform === 'ios') {
				// 	uni.navigateTo({
				// 		url:`../test/test?url=${this.$u.baseUrl + url}`,
				// 	})
				// } else {
					
				// }
				
				
				// return
				// const filePath = encodeURIComponent(this.$u.baseUrl + url)
				// uni.downloadFile({
				// 	url: filePath,
				// 	// header,
				// 	// {
				// 	// 	'content-type':'application/jpg'
				// 	// },
				// 	success: res => {
				// 		console.log(res);
				// 		// console.log('1')
				// 		// let path = ''
				// 		// if (uni.getSystemInfo().platform === 'ios') {
				// 		// 	path = escape(res.tempFilePath)
				// 		// } else {
				// 		// 	path = res.tempFilePath
				// 		// }
				// 		// console.log(path);
				// 		uni.saveFile({
				// 			tempFilePath:res.tempFilePath,
				// 			success(resolve) {
				// 				console.log(resolve);
				// 			},
				// 			fail(err) {
				// 				console.log(err);
				// 			}
				// 		})
				// 		// var filePath =res.tempFilePath;
				// 		// console.log(this.$u.baseUrl+filePath);
				// 		// uni.openDocument({
				// 		// 	filePath: escape(filePath),
				// 		// 	success: function(res) {
				// 		// 		console.log('打开文档成功');
				// 		// 	},
				// 		// 	fail(err) {
				// 		// 		console.log(escape(filePath));
				// 		// 		console.log(err);
				// 		// 	}
				// 		// });
				// 	},
				// 	fail: function(err) {
				// 		console.log(err);
				// 	}
				// });
			},
		}
	}
</script>

<style>
	page {
		background-color: #2169D3;
		overflow: hidden;
		/* height: 100vw; */
	}

	/* 手机系统 系统状态栏高度 */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #2169D3;
	}

	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box {
		position: absolute;
		width: 100%;
		height: 130px;
	}

	.out,
	.out1 {
		position: absolute;
		right: 20rpx;
		top: 0rpx;
		width: 200rpx;
		height: 200rpx;
	}

	.out1 {
		right: 180rpx;
	}

	.center {
		position: relative;
		display: flex;
	}

	.center-left {
		margin-left: 20rpx;
	}

	.center_left_item,
	.center_left_item_current {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 130rpx;
		height: 48rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		background: url(../../static/index/img_dr.png) no-repeat;
		background-size: 100% 100%;
		margin: 18rpx 12rpx;
	}

	.center_left_item_current {
		background: url(../../static/index/button_an.png) no-repeat;
		background-size: 100% 100%;
	}



	.center-right,
	.center-right-other {
		display: flex;
		flex-direction: column;
		margin-top: 23rpx;
		margin-left: 10rpx;
	}

	.center-right-other {
		flex-direction: row;
	}

	.center-right-inputSelect {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #58B6E5;
		width: 195px;
		height: 30rpx;
		border: 2rpx solid #000000;
		font-size: 16rpx;
		color: #FFFFFF;
		margin-right: 5rpx;
		margin-bottom: 10rpx;
	}

	.center-right-inputSelect input {
		width: 120rpx;
		border-bottom: 3rpx solid #FFFFFF;
		margin-top: 0rpx;
		font-size: 13rpx;
	}

	.center-right-inputSelect-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 8rpx;
		width: 20rpx;
		height: 16rpx;
		background-color: #FFFFFF;
		border: 1rpx dashed #000000;
	}

	.center-right-btn,
	.center-right-btn-other {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 85rpx;
		height: 30rpx;
		color: #FFFFFF;
		font-size: 16rpx;
		background-color: #58B6E5;
		border: 2rpx solid #000000;
		border-radius: 10rpx;
	}

	.picker-view {
		position: absolute;
		top: 40rpx;
		width: 170rpx;
		height: 120rpx;
		margin-left: 24rpx;
		font-size: 14rpx;
		background-color: #ACC4E6;
		z-index: 9999;
	}

	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}


	/* 表格 */
	.center-right-table,
	.center-right-table-four {
		position: absolute;
		bottom: 20rpx;
		width: 500rpx;
	}

	.center-right-table {
		right: 68rpx;
	}

	uni-scroll-view {
		height: 170rpx !important;
	}

	.u-tr-content {
		/* margin-top: 30rpx; */
		margin-top: 35rpx;
	}

	.center-right-table-four {
		bottom: 80rpx;
		right: 70rpx;
	}


	.u-tr-title {
		position: fixed;
		width: 500rpx;
		white-space: nowrap;
		overflow: auto;
		height: 35rpx;
		z-index: 999;
		margin-top: -2rpx;
		/* margin-bottom: 50rpx; */
	}

	.u-th,
	.u-td {
		font-size: 15rpx !important;
		border: 1rpx solid #FFFFFF !important;
		text-align: left !important;
		height: 35rpx !important;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
	}


	.u-th {
		background-color: #6096E6 !important;
		color: #FFFFFF !important;
	}

	.u-td {
		color: #034AB2 !important;
	}

	.pdfIcon {
		font-size: 20rpx;
		color: #2169D3;
		/* padding-top: -10rpx; */
	}

	.closeIcon {
		position: absolute;
		right: 10rpx;
		color: #999999;
		margin-top: -3rpx;
	}

	.u-empty {
		margin-top: 35rpx !important;
	}

	.out_text {
		position: absolute;
		font-size: 14rpx;
		color: #FFFFFF;
		/* margin: 10rpx; */
		margin-bottom: 13rpx;
	}
</style>
